import Vue from 'vue'
// 初始化的css文件 - 清除浏览器默认样式的
import 'normalize.css/normalize.css'

// 导入element-ui组件（全局导入）
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import '@/styles/index.scss' // global css

// 导入根组件
import App from './App'

// 导入vuex仓库
import store from './store'

// 导入路由
import router from './router'

// 注册全局的自定义指令，auth-btn，注意将来使用的时候要加上v-
Vue.directive('auth-btn', {
  // 绑定到el这个元素加载的时候会触发
  inserted(el, binding) {
    // console.log(el, binding);
    // binding.value就是使用时自定义指令后面的值
    // el：表示使用这个指令的dom对象

    const pers = store.state.user.profile.permissions
    // 针对管理员单独处理
    if (pers.includes('*:*:*')) {
      return
    }

    // 登录用户不拥有这个按钮的权限，则要移除
    // 获取当前用户权限数据 + 当前使用指令的dom元素的权限点
    if (!pers.includes(binding.value)) {
      el.remove()
    }
  }
})

// 全局注册组件
import AuthButton from '@/components/AuthButton.vue';
Vue.component('auth-button', AuthButton)

// 注册svg
import '@/icons'

Vue.use(ElementUI)


import { registerMicroApps, start } from 'qiankun'

registerMicroApps([
  {
    name: 'hmzs-big-screen', // 子应用名称
    entry: '//localhost:5173', // 子应用运行服务地址（就是npm run dev时的那个地址）
    container: '#container', // 挂载容器（id=container）
    activeRule: '/big-screen' // 激活路由(在哪个路由下加载子应用,需要和子应用的路由名称对应)
  }
])

start()

Vue.config.productionTip = false

// vue实例化
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
